$(function(){
    function lineCharInit(dataOne,dataTwo,time) {
        // 基于准备好的dom，初始化echarts图表
        var myChart = echarts.init(document.getElementById("charLine"));
        option = {
            calculable: true,
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross'//标尺
                },
                backgroundColor: 'rgba(245, 245, 245, 0.8)',
                padding: 10,
                textStyle: {
                    color: '#000'
                },
                formatter: function (data) {
                    var res = "";
                    for (var i = 0; i < time.length; i++) {
                        if (data[0].axisValue == time[i]) {
                            res="x轴："+ data[0].axisValue +"<br/><span style='display: inline-block; width: 10px;height: 10px; border-radius: 50%; background: rgba(39,243,242,0.8); margin-right: 5px;'></span>数据1："+data[0].value+"<br/><span style='display: inline-block; width: 10px;height: 10px; border-radius: 50%; background: rgba(73,250,195,0.8); margin-right: 5px;'></span>数据2："+data[1].value;
                            break;
                        }
                    }
                    return res;
                }
            },
            legend: {
               data: ["数据1","数据2"],
                x: 'left',
                padding: [20, 0, 0, 20],
                icon: "pin",
                textStyle: {
                    color: "#000"
                },
            },
            grid: {
                left: '20',
                right: '20',
                bottom: '20',
                containLabel: true,
                borderWidth: 0,
            },

            xAxis: [
                {
                    type: 'category',
                    boundaryGap: false,
                    splitLine: {
                        show:false,
                        lineStyle: {
                            color: ['#CCC',"#DDD"],
                            width: 1,
                            type: 'dashed'
                        }
                    },
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: '#b6b6b7'
                        }
                    },
                    axisLine: {
                        lineStyle: {
                            color: '#1d5ea4',
                            width: 1,
                        }
                    },
                    data: time
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    splitLine: {
                        lineStyle: {
                            color: ['#CCC',"#DDD"],
                            width: 1,
                            type: 'dashed'
                        }
                    },
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: '#b6b6b7'
                        }
                    },
                    axisLine: {
                        lineStyle: {
                            color: '#1d5ea4',
                            width: 1,
                        }
                    }
                }
            ],
            dataZoom: [
                {
                    type: 'inside',
                    xAxisIndex:0,
                    start: 0,
                    end: 100
                }
            ],
            series: [
                {
                    name:"数据1",
                    type: 'line',
                    smooth: true,  //这句就是让曲线变平滑的
                    //symbol:"roundRect",//标记的图形。
                    symbolSize:10,//标记的大小
                    itemStyle: {
                        normal: {
                            areaStyle: {
                                type: 'default',
                                color: new echarts.graphic.LinearGradient(
                                    0, 0, 0, 1,
                                    [
                                        {offset: 0.1, color: 'rgba(39,243,242,0.8)'},
                                        {offset: 0.8, color: 'rgba(46,133,178,0.2)'}
                                    ])
                            },

                            color: "rgba(39,243,242,0.8)"

                        }
                    },
                    data: dataOne
                },
                {
                    name:"数据2",
                    type: 'line',
                    smooth: true,  //这句就是让曲线变平滑的
                    symbolSize:10,
                    itemStyle: {
                        normal: {
                            areaStyle: {
                                type: 'default',
                                color: new echarts.graphic.LinearGradient(
                                    0, 0, 0, 1,
                                    [
                                        {offset: 0.1, color: 'rgba(73,250,195,0.8)'},
                                        {offset: 0.8, color: 'rgba(17,182,236,0.1)'}
                                    ])

                            },
                            color: "rgba(73,250,195,0.8)"
                        }
                    },
                    data: dataTwo
                }
            ]
        };

        // 为echarts对象加载数据
        myChart.setOption(option);

    }

    var dataOne=[50,60,40,150,80,30,90,10,50,80];
    var dataTwo=[30,90,10,50,180,50,60,80,100,70];
    var time=[1,2,3,4,5,6,7,8,9,10];
    lineCharInit(dataOne,dataTwo,time);
})
